import React, {
  CSSProperties,
  forwardRef,
  useEffect,
  useRef,
} from "react";
import cx from "classnames";
import "./index.scss";


interface ScollElementProps extends React.HTMLAttributes<HTMLDivElement> {
  onScoll?: React.UIEventHandler; // scroll的监听事件
  /** 滚动结束事件*/
  onEnd?: (e) => void;
  /** 滚动开始时间*/
  onStart?: (e) => void;
  className?: string;
  /*是否水平滚动*/
  horizontal?: boolean;
  innerStyle?: CSSProperties;
  width?: number;
  height?: number;
  /**  onStart和onEnd的触发时机*/
  threshold?: number;
}

const HORIZONTAL = {
  POS: "scrollLeft",
  SIZE: "offsetWidth",
  SCROLL: "scrollWidth",
};
const VERTICAL = {
  POS: "scrollTop",
  SIZE: "offsetHeight",
  SCROLL: "scrollHeight",
};

const ScrollElement = forwardRef<HTMLDivElement | null, ScollElementProps>(
  function _ScollElement(
    {
      onScoll,
      onEnd,
      onStart,
      horizontal,
      className,
      width,
      height,
      children,
      innerStyle,
      threshold = 5,
      /* props是继承 div盒子属性 比如key onclick等*/
      ...props
    }: ScollElementProps,
    ref
  ) {
    const ATTR = horizontal ? HORIZONTAL : VERTICAL;
    const refContainer = useRef<HTMLDivElement | null>(null);
    const refLastPos = useRef<number>(0);
    const refIsEnd = useRef<boolean>(false);
    const refIsStart = useRef<boolean>(false);

    const onRef = (r: HTMLDivElement) => {
      
      refContainer.current = r;
      if (typeof ref === "function") {
        ref(r);
      } else if (ref) {
        ref.current = r;
      }
    };

    const onScollHandler: React.UIEventHandler = (e) => {
      onScoll && onScoll(e);
      if (refContainer.current) {


        // console.log(e.currentTarget[ATTR.POS]);
        console.log(refContainer.current[ATTR.SCROLL]);
        /* 触底加载事件*/
        if (
        // e.currentTarget[ATTR.POS] - refLastPos.current && refContainer.current[ATTR.SCROLL] - e.currentTarget[ATTR.POS] - e.currentTarget[ATTR.SIZE] <threshold
          // 
          refContainer.current[ATTR.SCROLL] - e.currentTarget[ATTR.POS] -  refContainer.current[ATTR.SIZE]< threshold
        ) {
         if(!refIsEnd.current){
          onEnd && onEnd(e);
          refIsEnd.current = true;
         }
         
        }else{
          refIsEnd.current = false;
        }

        /*触顶加载事件*/
        if(e.currentTarget[ATTR.POS]<threshold){
           if(!refIsStart.current){
             onStart&&onStart(e);
             refIsStart.current= true;
           }
        }else{
          refIsStart.current = false;
        }
      }

      
      /*每次滚动都将scrollTop||scrollLeft赋给refLastPos*/
      refLastPos.current = e.currentTarget[ATTR.POS];
    };
    useEffect(() => {}, []);

    const styleObject: React.CSSProperties = horizontal
      ? {
          overflowX: "auto",
          overflowY: "hidden",
          width: `${width}px`,
          height: `${height}px`,
        }
      : {
          overflowX: "hidden",
          overflowY: "auto",
          width: `${width}px`,
          height: `${height}px`,
        };

    const innerStyleObject: CSSProperties = horizontal
      ? {
          display: "inline-block",
          overflowX: "hidden",
          overflowY: "auto",
        }
      : {
          overflowX: "auto",
          overflowY: "hidden",
        };

    return (
      <div
        className={cx("qh-base-scroll-element", className)}
        style={{ ...styleObject }}
        {...props}
        ref={onRef}
        onScroll={onScollHandler}
      >
        <div style={{ ...innerStyle, ...innerStyleObject }}>{children}</div>
      </div>
    );
  }
);

export default ScrollElement;
